<template lang="html">
  <div class="articleNew">
    <UpImg ref="upImg" @upSuccess="upImgSuccess" />

    <Loading v-if="loading" />
    <mu-container v-show="!loading">
      <mu-text-field label="标题" type="text" v-model="infos.title" :max-length="50" label-float full-width></mu-text-field>
      <div class="article_cover">
        <mu-card-media title="封面图" sub-title="点击上传" @click="$refs.upImg.click()">
          <img :src="infos.cover">
        </mu-card-media>
      </div>
      <mu-text-field label="假浏览量" type="number" v-model.number="infos.fake_views" label-float full-width></mu-text-field>
      <div ref="editor" class="editor">
      </div>
      <br>
      <mu-button color="primary" @click="submit">提交</mu-button>
    </mu-container>
  </div>
</template>

<script>
import E from 'wangeditor'

export default {
  data() {
    return {
      loading: true,
      infos: {
        id: 0,
        type: null,
        title: '',
        cover: '',
        fake_views: 0,
      },
      type: null,
      editor: null,
    }
  },
  watch: {
    'infos.title': function (valu, old) {
      this.$store.commit('title', valu)
    },
  },
  mounted() {
    this.$store.commit('title', 'loading')
    this.newEditor()

    let params = this.$route.params,
        type = params.type,
        id = params.id ? params.id : 0

    this.type = type
    this.infos.id = id

    this.getInfo(id)
  },
  methods: {
    getInfo(id) {
      if (!id) {
        this.loading = false
        return
      }

      flyio.get('/article/info', {
        id,
      }).then((res) => {
        this.editor.txt.html(res.body)
        this.infos = res
        this.loading = false
      })
    },
    submit() {
      this.infos.type = this.type

      let infos = this.infos,
          type = infos.type

      if (infos.title == '') {
        this.$Toast('标题', 'error')
        return
      }

      if (infos.cover.indexOf('data:image/png;base64') != -1) {
        this.$Toast('图片', 'error')
        return
      }

      if (infos.body.length === 0) {
        this.$Toast('内容', 'error')
        return
      }

      flyio.post('/article/new', infos).then((res) => {
        this.$Toast('保存成功')
        this.$parent.router('ArticleList', {
          type,
        })
      }).catch((res) => {
          this.$Toast('保存失败', 'error')
      })
    },
    upImgSuccess(img) {
      this.infos.cover = img
    },
    newEditor() {
      let editor = new E(this.$refs.editor)

      // onchange
      editor.customConfig.onchange = (html) => {
        this.infos.body = html
      }

      // 错误提示
      editor.customConfig.customAlert = (err) => {
        this.$Toast(err, 'error')
      }

      // 上传图片
      editor.customConfig.uploadImgMaxLength = 1
      editor.customConfig.customUploadImg = (file, insert) => {
        this.$refs.upImg.upImgFile(file[0]).then((url) => {
          insert(url)
        })
      }

      // 响应状态栏
      if (window.innerWidth < 768) {
        editor.customConfig.menus = [
          'head',  // 标题
          'bold',  // 粗体
          'fontSize',  // 字号
          'italic',  // 斜体
          'underline',  // 下划线
          'strikeThrough',  // 删除线
          'link',  // 插入链接
          'list',  // 列表
          'justify',  // 对齐方式
          'quote',  // 引用
          'image',  // 插入图片
          'video',  // 插入视频
        ]
      } else {
        editor.customConfig.menus = [
          'head',  // 标题
          'bold',  // 粗体
          'fontSize',  // 字号
          'fontName',  // 字体
          'italic',  // 斜体
          'underline',  // 下划线
          'strikeThrough',  // 删除线
          'foreColor',  // 文字颜色
          'backColor',  // 背景颜色
          'link',  // 插入链接
          'list',  // 列表
          'justify',  // 对齐方式
          'quote',  // 引用
          'image',  // 插入图片
          'table',  // 表格
          'video',  // 插入视频
          'code',  // 插入代码
          'undo',  // 撤销
          'redo'  // 重复
        ]
      }

      editor.create()

      this.editor = editor
    },
  },
}
</script>

<style lang="css">
.article_cover {
  width: auto;
  min-height: 200px;
  max-width: 375px;
  margin: auto;
}
.w-e-toolbar .w-e-menu {
  padding: 5px 8px !important;
}
.w-e-text {
  min-height: 300px !important;
  max-height: 1000px !important;
}
.w-e-text-container {
  height: auto !important;
  max-height: 1000px !important;
}
</style>
